@extends('layouts.application')

@section('content')
    <div class="admin-content">

        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">新增用户组</strong> /
                <small>Create Group</small>
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-12">
                <div class="am-tab-panel">

                    <form class="am-form" action="{{route('system.role.store')}}" method="post">

                        {{csrf_field()}}
                        @include('layouts.shared._flash')

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                用户组名
                            </div>
                            <div class="am-u-sm-8 am-u-md-4 am-u-end col-end">
                                <input type="text" class="am-input-sm" name="name" placeholder="请输入用户组名">
                            </div>
                        </div>

                        <div class="am-g am-margin-top">
                            <div class="am-u-sm-4 am-u-md-2 am-text-right">
                                权限列表
                            </div>

                            <div class="am-u-sm-8 am-u-md-8 am-u-end col-end">

                                @foreach($permissions as $permission)
                                    <div class="am-panel am-panel-default">
                                        <div class="am-panel-hd">
                                            <label class="am-checkbox-inline">
                                                <input type="checkbox" value="{{$permission->id}}" name="permission_id[]"
                                                       class="rule_one">
                                                <span class="am-badge am-badge-secondary am-text-sm am-radius">{{$permission->label}}</span>
                                            </label>
                                        </div>
                                        <div class="am-panel-bd">

                                            @foreach($permission->children as $children)
                                                <div class="am-g am-margin-top">
                                                    <div class="am-u-sm-4 am-u-md-3 am-text-right p2">
                                                        <label class="am-checkbox-inline">
                                                            <input type="checkbox" value="{{$children->id}}" name="permission_id[]"
                                                                   class="rule_two">
                                                            <span class="am-badge am-badge-success am-radius">{{$children->label}}</span>
                                                        </label>
                                                    </div>
                                                    <div class="am-u-sm-8 am-u-md-9 am-u-end col-end p3">

                                                        @foreach($children->children as $child)
                                                            <label class="am-checkbox-inline">
                                                                <input type="checkbox" value="{{$child->id}}" name="permission_id[]" class="rule_three">{{$child->label}}
                                                            </label>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            @endforeach

                                        </div>
                                    </div>
                                @endforeach

                            </div>
                        </div>

                        <div class="am-margin">
                            <button type="submit" class="submit am-btn am-btn-primary">保存修改</button>
                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(function () {
            //一级选中，二级三级全选中
            $('.rule_one').click(function () {
                var checked = $(this).prop('checked');
                $(this).parents('.am-panel-hd').next().find('input').prop('checked', checked);
            })
            //二级选中，三级全选中
            $('.rule_two').click(function () {
                var checked = $(this).prop('checked');
                $(this).parents('.p2').next().find('input').prop('checked', checked);

                //二级选中一个，一级也选中
                var checked_length = $('.rule_two:checked').length;
                if (checked_length) {
                    $(this).parents('.am-panel').find('.rule_one').prop('checked', true);
                } else {
                    $(this).parents('.am-panel').find('.rule_one').prop('checked', false);
                }
            });
            //三级选中一个，二级一级也选中
            $('.rule_three').click(function () {
                var checked_length = $('.rule_three:checked').length;
                if (checked_length) {
                    $(this).parents('.am-panel').find('.rule_one').prop('checked', true);
                    $(this).parents('.p3').prev().find('.rule_two').prop('checked', true);
                } else {
                    $(this).parents('.am-panel').find('.rule_one').prop('checked', false);
                    $(this).parents('.p3').prev().find('.rule_two').prop('checked', false);
                }
            });

            //ajax新增用户组
            $('.submit').click(function () {
                var info = $('input').serialize();

                $.post("", info, function (info) {
                    if (info.status == 1) {
                        alert(info.msg);
                        location.href = "";
                    } else {
                        alert(info.msg);
                        return false;
                    }
                })

                // $.ajax({
                //     type: 'post',
                //     url: "",
                //     data: info,
                //     success: function (info) {
                //         if (info.status == 1) {
                //             alert(info.msg);
                //             location.href = "";
                //         } else {
                //             alert(info.msg);
                //             return false;
                //         }
                //     }
                // });
            });
            return false;
        })
    </script>
@endsection